<template>
    <div class="layout">
        <!-- 左边导航栏 -->
        <nav class="left_nav">
            <left-nav></left-nav>
        </nav>
        <!-- 右边主体 -->
        <main>
            <!-- 面包屑导航 -->
            <nav class="top_nav">
                <top-nav></top-nav>
            </nav>
            <div class="main_box">
                <router-view class="main_box_body"></router-view>
            </div>
        </main>
    </div>
</template>


<script>
// 引入左边导航栏
import LeftNav from '@/views/index/LeftNav.vue'
import TopNav from '@/views/index/TopNav.vue'

export default {
    components: {
        // 声明导航栏
        LeftNav,
        TopNav,
    },

}

</script>

<style lang="less">
.layout {

    display: flex;
    height: 100%;

    //
    .left_nav {
        width: 200px;
        height: 100%;
        background-color: #304156;
        display: flex;
        flex-direction: column;
        overflow: auto;
    }

    main {
        background-color: #f0f2f5;
        width: 100px;
        height: 100%;
        overflow: auto;
        flex-grow: 1;

        .top_nav {
            width: 100%;
            height: 60px;
            background-color: #fff;
            padding: 5px 20px;

        }

        .main_box {
            width: 100%;
            padding: 20px;

            .main_box_body {
                background-color: #fff;
                padding: 10px
            }
        }
    }
}
</style>